<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>progress 进度条</title>
</head>
<body>
<h2>新表单元素 - progress 进度条</h2>

<progress value="0.2" id="app"></progress>
<script>
    // 创建前进的进度条
    // 1. 创建初始变量 val 保存进度条初始值
    let val = 0;
    // 2. 获取进度条元素
    let p2 = document.getElementById("app");
    // 3. 创建定时器
    let timer = setInterval(function () {
        // 4. 获取原有进度条的 value
        val = p2.value;
        // 5. 修改 value 的值加 0.1
        val += 0.1;
        // 6. 修改进度条的值
        p2.value = val;
        // 7. 判断进度条的值是否大于1
        if (val > 1) {
            clearInterval(timer);
            alert("下载完成");
        }
    }, 1000);
</script>
</body>
</html>